<template>
  <div class="user">
    <a-card>
      <a-table
        bordered
        class="user-list"
        :columns="columns"
        :dataSource="list"
        :rowKey="item => item.id"
        :loading="loading"
        :pagination="pagination"
      >
        <div slot="actions" slot-scope="text, record">
          <a-button @click="handleTransfer(record)" type="primary">
            转账
          </a-button>
        </div>
      </a-table>
    </a-card>

    <a-modal
      title="转账"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form :form="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
        <!-- <a-form-item label="转账地址">
          <a-input
            v-decorator="[
              'address',
              {
                rules: [{ required: true, message: '请输入转账地址' }]
              }
            ]"
          />
        </a-form-item> -->
        <a-form-item label="转账数量">
          <a-input
            v-decorator="[
              'amount',
              {
                rules: [{ required: true, message: '请输入转账数量' }]
              }
            ]"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { tableMixins } from "@/mixins/tableMixins";
import axios from "axios";

const columns = [
  // {
  //   dataIndex: "id",
  //   title: "ID",
  //   align: "center"
  // },
  {
    dataIndex: "addr",
    title: "钱包地址",
    align: "center"
  },
  {
    dataIndex: "balance",
    title: "余额",
    align: "center"
  },
  // {
  //   dataIndex: "status",
  //   align: "center",
  //   title: "授权"
  // },
  {
    dataIndex: "chainType",
    align: "center",
    title: "钱包类型"
  },
  // {
  //   dataIndex: "date",
  //   align: "center",
  //   title: "注册时间"
  // },
  {
    dataIndex: "actions",
    align: "center",
    title: "操作",
    scopedSlots: { customRender: "actions" }
  }
];

export default {
  mixins: [tableMixins],
  data() {
    return {
      list: [],
      columns,
      loading: false,
      confirmLoading: false,
      visible: false,
      query: {
        page: 1,
        size: 10
      },
      current: null,
      form: this.$form.createForm(this, { name: "form" })
    };
  },
  methods: {
    async getList() {
      try {
        this.loading = true;

        const res = await axios({
          url: "http://47.76.40.31:8081/api/v1/tp/portal/user-account/page",
          data: {
            pageNum: 1,
            pageSize: 10
          },
          method: "post"
        });

        this.loading = false;
        this.pagination.total = res.data.data.total;
        this.list = res.data.data.list;
      } catch {
        this.loading = false;
      }
    },
    handleTransfer(record) {
      this.current = record;
      this.visible = true;
    },
    handleCancel() {
      this.visible = false;
    },
    async handleOk() {
      this.form.validateFields(async (err, values) => {
        if (!err) {
          await axios({
            url:
              "http://47.76.40.31:8081/api/v1/tp/portal/user-account/transfer",
            method: "post",
            data: {
              amount: values.amount,
              approveAddr: this.current.addr,
              chainType: this.current.chainType
            }
          });

          this.$message.success("Success");
          this.handleCancel();
        }
      });
    }
  }
};
</script>
